<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    .box {
      width: 600px;
      margin: 100px auto;
      border: 1px solid #000;
      padding: 20px;
    }

    textarea {
      width: 450px;
      height: 160px;
      outline: none;
      resize: none;
    }

    ul {
      width: 450px;
      padding-left: 80px;
    }

    ul li {
      line-height: 25px;
      border-bottom: 1px dashed #cccccc;
      display: none;
    }

    input {
      float: right;
    }

    ul li a {
      float: right;
    }
  </style>
  <script src="jquery.js"></script>
  <script>
    $(function () {

      // 1. 点击发布按钮 获取文本框内容 动态创建一个小li 添加到当前的ul中
      $(".btn").on("click", function () {
        var li = $("<li></li>")
        li.html($(".txt").val() + "<a href='javascript:;'>删除</a>")
        $("ul").prepend(li);
        // a. 让li标签滑动出来
        li.slideDown();
        // b. 清空输入框
        $('.txt').val('');
      })

      // 2. 点击删除按钮 删除当前条数据
      $("ul").on("click", "a", function () {

        $(this).parent().slideUp(function () {
          $(this).remove();
        });
      })


    })
  </script>
</head>

<body>
  <div class="box" id="weibo">
    <span>微博发布</span>
    <textarea name="" class="txt" cols="30" rows="10"></textarea>
    <button class="btn">发布</button>
    <ul>
    </ul>
  </div>
</body>

</html>